<template>
  <main class="flex flex-col items-center">
    <!-- 用户头像。 -->
    <div class="w-20 h-20 bg-gray-50 border rounded mt-12 flex justify-center items-center">
      <i class="el-icon-picture text-2xl text-gray-300"></i>
    </div>
    <!-- 用户昵称。 -->
    <h1 class="text-gray-900 text-xl mt-4">张德龙</h1>
    <!-- 进入按钮。 -->
    <button type="button" class="app-no-drag bg-green-500 hover:bg-green-600 active:bg-green-700 text-white text-sm px-16 py-2 mt-16 rounded transition" v-on:click="handleLoginSubmit">进入微信</button>
    <!-- 其他选项。 -->
    <div class="mt-8 flex flex-row justify-center items-center text-sm">
      <span class="app-no-drag cursor-pointer text-blue-900">切换账号</span>
      <span class="text-gray-300 mx-4">|</span>
      <span class="app-no-drag cursor-pointer text-blue-900">仅传输文件</span>
    </div>
  </main>
</template>

<script>
import {ipcRenderer} from "electron";

export default {
  name: "login-form",
  methods: {
    // 处理：登录提交。
    handleLoginSubmit() {
      ipcRenderer.send("login-success");
    }
  }
};
</script>